<!--兑换红包页面-->
<template>
  <div class="my_a_btab_ch">
    <div class="my_a_btab_ch_div1">
      <input
        type="text"
        placeholder="请输入兑换码"
        class="my_a_btab_ch_div1_inp1"
        v-model="inp_val1"
      />
    </div>
    <div class="my_a_btab_ch_div2">
      <input
        type="text"
        placeholder="验证码"
        class="my_a_btab_ch_div2_inp1"
        maxlength="4"
        v-model="inp_val2"
      />
      <div class="my_a_btab_ch_div2_div">
        <IdentifyCode
          :identify-code="identifyCode"
          :content-width="90"
          :content-height="35"
        ></IdentifyCode>
        <div class="mag">
          <span class="code hui" @click="refreshCode"> 看不清 </span>
          <span class="code blue" @click="refreshCode"> 换一张 </span>
        </div>
      </div>
    </div>
    <div :class="{ my_a_btab_ch_div3: true, jxg: bull }" @click="exchangeclick">
      兑换
    </div>
      <van-popup
      v-model="show"
      :class="{
        msgF: true,
        animate__animated: dada1,
        animate__bounceIn: dada2,
        animate__slow: dada3,
      }"
    >
        <div class="msg">
          <div>
            <i class="iconfont icon-alert impdiv"></i>
          </div>
          <p class="msg_p">{{ message }}</p>
          <button class="button1" @click="fanhuiclick">确定</button>
        </div>
      </van-popup>
  </div>
</template>

<script>
import IdentifyCode from "vue-identifycode"; // 引入包

export default {
  name: "IdentifyCodeTest",
  components: { IdentifyCode },
  data() {
    return {
      identifyCode: "",
      inp_val1: "",
      inp_val2: "",
      bull: false,
      show: false,
      message: "无效的兑换码",
      dada1 : false,
      dada2 : false,
      dada3 : false,
    };
  },
  computed: {
    dateRange() {
      const { inp_val1, inp_val2 } = this;
      return { inp_val1, inp_val2 };
    },
  },
  watch: {
    dateRange(val) {
      if (val.inp_val1 != null) {
        if (val.inp_val2.length == 4) {
          this.bull = true;
        } else {
          this.bull = false;
        }
      } else {
        this.bull = true;
      }
    },
  },
  mounted() {
    this.identifyCode = this.createCode();
  },
  methods: {
    createCode() {
      let code = "";
      const codeLength = 4; // 验证码的长度
      // eslint-disable-next-line no-array-constructor
      const random = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); // 随机数
      for (let i = 0; i < codeLength; i++) {
        // 循环操作
        const index = Math.floor(Math.random() * 9); // 取得随机数的索引（0~35）
        code += random[index]; // 根据索引取得随机数加到code上
      }
      return code;
    },
    refreshCode() {
      this.identifyCode = this.createCode();
    },
    exchangeclick() {
        this.show = true;
         this.dada1 = true;
      this.dada2 = true;
      this.dada3 = true;
    },
    fanhuiclick(){
        this.show = false;
        this.dada1 = false;
      this.dada2 = false;
      this.dada3 = false;
    }
  },
};
</script>

<style lang="less">
.my_a_btab_ch {
  padding: 0 11.719px;
  .my_a_btab_ch_div1 {
    .my_a_btab_ch_div2_inp1,
    .my_a_btab_ch_div1_inp1 {
      width: 351.9px;
      height: 49.46px;
      box-sizing: border-box;
      padding: 14.063px 9.375px;
      border: none;
      margin-top: 20px;
      border-radius: 5px;
    }
  }
  .my_a_btab_ch_div2 {
    margin-top: 14.406px;
    display: flex;
    justify-content: space-between;
    input {
      border: none;
      width: 200px;
      height: 51.56px;
      padding: 9.375px;
      box-sizing: border-box;
      border-radius: 5px;
    }

    .my_a_btab_ch_div2_div {
      box-sizing: border-box;
      height: 51.56px;
      display: flex;
      align-items: center;
      flex: 2;
      background-color: #fff;
      margin-left: 8px;
      border-radius: 5px;
      font-size: 12px;
      padding-left: 8px;
      .mag {
        margin-left: 5px;
      }
      .blue {
        display: inline-block;
        color: #3b95e9;
        margin-top: 5px;
      }
      .hui {
        color: #666;
      }
    }
  }

  .my_a_btab_ch_div3 {
    width: 342.521px;
    height: 42px;
    border-radius: 5px;
    margin: 16.406px 0px 0px 4.406px;
    font-size: 16px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background-color: #ccc;
  }

  .jxg {
    background-color: #4cd964;
  }
  .msgF {
    border-radius: 10px;
    margin: -20% -37%;
    display: none;
    .msg {
      width: 281.25px;
      text-align: center;

      .impdiv {
        font-size: 80px;
        color: #f8cb86;
        font-weight: 200;
      }
      .msg_p {
        color: #333333;
        margin-top: 10px;
      }
      .button1 {
        width: 100%;
        height: 42px;
        margin-top: 20px;
        background-color: #4cd964;
        border: none;
      }
    }
  }
  .animate__animated{
    display: block;
  }
}
</style>